<template>
    <div class="store">
        <img :src="storeBG" style="width: 100vw;height: 100vh;" />
        <div class="storeBuy">
            <div class="nav">
                <img :src="back" style="width: 24px;height: 20.93px;" @click="backRouter"/>
                <view class="title">Store</view>
                <div class="coinsNum">
                    <img :src="coins" style="width: 25px;height: 25px;"/>
                    <div class="num">{{ coinsNum >= 1000 ? '999+' : coinsNum }}</div>
                </div>
            </div>
            <img :src="storeTop" style="width: 100%;" />
            <div class="buyItem">
                <div v-for="(item, index) in buyList" :key="index" class="buyCoins" @click="gotoBuy(index)">
                    <img :src="buyItem" style="width: 154px;height: 188px;"/>
                    <div class="coinsTitle">{{item.num}} coins</div>
                    <div class="pri">$ {{ item.money }}</div>
                </div>
            </div>
        </div>

        <div class="meanList">
            <img :src="meanBG" style="width: 100%;height: 100%;"/>
            <div class="chooseMean">
                <img :src="homeIcon" style="width: 51px;height: 51px;" @click="gotoHome"/>
                <img :src="history" style="width: 51px;height: 51px;" @click="gotoHistory"/>
                <img :src="storeIcon" style="width: 51px;height: 51px;"/>
            </div>
        </div>
    </div>
</template>
<script setup>
import {Base64} from 'js-base64'
import storeBG from '../assets/store/storeBG.png'
import back from '../assets/back.png'
import storeTop from '../assets/store/storeTop.png'
import coins from '../assets/store/coins.png'
import buyItem from '../assets/store/buyItem.png'
import homeIcon from "../assets/homeIcon.png"
import history from "../assets/historyIcon.png"
import storeIcon from "../assets/storeIcon_action.png"
import meanBG from "../assets/meanBG.png"
import { useRouter } from "vue-router";
const router = useRouter()
import { onMounted, ref } from 'vue'
import { showLoadingToast, closeToast, showToast } from 'vant';
const coinsNum = ref(0)
let buyList = ref([{num: 100, money: 4.99 },{num: 200, money: 9.99 }])
onMounted(() => {
    coinsNum.value = localStorage.getItem('LEDWork') ? Number(localStorage.getItem('LEDWork')) : 0
})
let backRouter = () => {
    router.back()
}

let gotoBuy = (index) => {
    showLoadingToast({
      duration: 0,
      message: 'Loading...',
      forbidClick: true,
    });
	 window['iap'] = (data) => {
	        let res;
	        try {
	            const decodedString = Base64.decode(data);
	            res = JSON.parse(decodedString);
				console.log(res);
	        } catch (error) {
	            res = data;
	        }
            console.log(res);
            console.log("KKKK");
	        if (res !== null && typeof res === 'object') {
                console.log("LLLL");
	            let num = res.productIdentifier.replace(/\D/g, ''); // 匹配第一个连续的数字
				coinsNum.value = coinsNum.value + Number(num)
                console.log( Number(num));
                console.log(coinsNum.value);
                localStorage.setItem('LEDWork', coinsNum.value)
				closeToast()
	        } else {
                closeToast()
                showToast('Payment failed!');
	        }
	        // 支付成功 return0结束
	        return 0;
	}
	window['send'](`terms://buy?product=com.ledpop.work.${buyList.value[index].num}&num=1`);
}
const gotoHome = () => {
    router.push('/')
}
const gotoHistory = () => {
    router.push('/history')
}
</script>
<style scoped>
@import "../common/font.css";
.store {
    width: 100vw;
    min-height: 100vh;
    position: relative;
}
.storeBuy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    color: #fff;
    z-index: 9;
    padding: 54px 26px;
    box-sizing: border-box;
}
.nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: FredokaOne;
    font-weight: 400;
    font-size: 28px;
    align-items: center;
    position: relative;
    margin-bottom: 23px;
}
.coinsNum {
    width: 60px;
    height: 27px;
    background: #FFFFFF;
    border-radius: 32px 32px 32px 32px;
    padding: 1px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.num {
    font-family: FredokaOne;
    font-weight: 400;
    font-size: 16px;
    color: #40075E; 
    margin-left: 2px;
}
.buyItem {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.buyCoins {
    margin-bottom: 36px;
    position: relative;
    font-family: Shrikhand;
}
.coinsTitle {
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    white-space: nowrap;
    transform: translateX(-50%) rotateZ(-1.9deg);
}
.pri {
    position: absolute;
    bottom: 8px;
    left: 7px;
    font-weight: 400;
    font-size: 18px;
    color: #FC9334;
}
.meanList {
    width: 344px;
    height: 89px;
    position: fixed;
    /* bottom: 38px; */
    top: 85vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
}
.chooseMean {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>